<template>
	<view class="container">
		<form @submit="handleSubmit">
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="input" v-model="formData.name" placeholder="请输入姓名" :focus="autoFocus" />
			</view>

			<view class="form-item">
				<text class="label">关系</text>
				<picker class="picker" mode="selector" :range="relationships" @change="bindPickerChange">
					<view class="picker-text">{{ formData.relationship || '请选择关系' }}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">手机号</text>
				<input class="input" v-model="formData.phone" placeholder="请输入手机号" type="number" />
			</view>

			<button class="submit-btn" form-type="submit" :disabled="!formData.name || !formData.relationship || !formData.phone">
				提交
			</button>
		</form>
	</view>
</template>

<script>
import { request } from '@/util/request.js'
export default {
	data() {
		return {
			autoFocus: true,
			formData: {
				id: '',
				name: '',
				relationship: '',
				phone: ''
			},
			relationships: ['配偶', '子女', '父母', '其他亲属']
		}
	},
	methods: {
		bindPickerChange(e) {
			const index = e.detail.value
			this.formData.relationship = this.relationships[index]
		},
		async handleSubmit() {
			const res = await request({
				url: 'owner-server/owner/addFamily',
				method: 'POST',
				data: this.formData
			})
			if (res.code === 200) {
				uni.showToast({
					title: '添加成功',
					icon: 'success',
					duration: 2000
				})
				uni.navigateBack()
			}
		}
	},
	onLoad(options) {
		console.log(options.id);
		if (options && options.id) {
			this.formData.id = options.id
		}
	}
}
</script>

<style scoped>
.container {
	padding: 30rpx;
}

.form-item {
	margin-bottom: 40rpx;
}

.label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.input,
.picker {
	height: 80rpx;
	padding: 0 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	font-size: 28rpx;
}

.picker-text {
	line-height: 80rpx;
	color: #666;
}

.submit-btn {
	margin-top: 60rpx;
	background-color: #007AFF;
	color: white;
	border-radius: 40rpx;
	font-size: 32rpx;
}

.submit-btn[disabled] {
	background-color: #cccccc;
}
</style>